<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 去除默认样式 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 设置html body标签高度100% */
    html,
    body {
      width: 100%;
      height: 100%;
    }

    /* 设置父容器的样式 */
    .container {
      /* vh=viewHeight 视口区域高度
      vw=viewWidth 视口区域宽度
      */
      height: 100vh;
      /*开始弹性盒 */
      display: flex;
      /* 设置主轴排列 上到下 */
      flex-direction: column;
    }

    /* 设置头部区域 */
    .container .header {
      line-height: 70px;
      font-size: 30px;
      text-align: center;
      background-color: blue;


    }

    /* 设置内容区域 */
    .container .content {
      /* z占满剩余空间 */
      flex: 1;
      /* 设置垂直方向滚动条 */
      overflow-y: scroll;
    }

    .container .content div {
      width: 96%;
      margin: 2%;
      height: 200px;
      background-color: green;
    }

    /* 设置菜单栏宫格 */
    .container .content .meau {
      display: flex;
      /* 开启换行 */
      flex-wrap: wrap;

    }

    /*  */
    .container .content .meau nav {
      flex: 0 1 25%;
      border: 1px solid red;
      box-sizing: border-box;
    }

    .container .footer {
      /* 开启伸缩盒 */
      display: flex;
      /* 设置交叉轴对齐方式 */
      justify-content: space-evenly;
      width: 100vw;
      background-color: blue;

    }

    /* 设置tab样式 */
    .container .footer div {
      width: 70px;
      line-height: 70px;
      text-align: center;
      color: white;
      font-size: 28px;
    }
  </style>
</head>

<body>
  <!-- 父容器 -->
  <div class="container">
    <!-- 头部 -->
    <div class="header">首页</div>
    <!-- 内容 -->
    <div class="content">
      <div class="meau">
        <nav>1</nav>
        <nav>2</nav>
        <nav>3</nav>
        <nav>4</nav>
        <nav>5</nav>
        <nav>6</nav>
        <nav>7</nav>
        <nav>8</nav>
      </div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <!-- tab -->
    <div class="footer">
      <div>首页</div>
      <div>帮助</div>
      <div>我的</div>
      <div>其他</div>
    </div>
  </div>

</body>

</html>